<template>
  <div>
    <div class="cont">
      <div class="title">
        <h1 class="goods-tit">
          <i class="offc"><img src="//img14.360buyimg.com/jdphoto/jfs/t16837/175/2336746342/1085/d4b6cf2c/5af16f73N5f0ce6d0.png" alt=""></i>
          {{text1}}
        </h1>
        <div class="collec">
          <span class="iconfont">&#xe635;</span>
          <div>关注</div>
        </div>
        <div class="redh">{{desc1}}</div>
        <div class="price">
          <span class="pri"><i>￥</i>{{price1}}.<i>00</i></span>
          <span class="pre">降价提醒</span>
        </div>
      </div>
      <div class="sale">
        <a>白条</a>
        <span>【打白条】12期免息/24期息费5折</span>
        <i class="iconfont">&#xe740;</i>
      </div>
      <div class="shide"></div>
      <div class="sale spec">
        <a>已选</a>
        <span>1个</span>
        <i class="iconfont">&#xe740;</i>
      </div>
      <div class="shide"></div>
      <div class="sale address">
        <a>送至</a>
        <span>福建厦门市思明区城区观音山匹克大厦</span>
        <i class="iconfont">&#xe740;</i>
      </div>
      <div class="shide"></div>
    </div>
    <div class="bottom">
      <div class="icon1">
        <span class="iconfont">&#xe649;</span>
        <a>联系客服</a>
      </div>
      <div class="icon1">
        <span class="iconfont">&#xe61e;</span>
        <a>进店</a>
      </div>
      <div class="icon1">
        <router-link tag="i" to="/shopcart">
          <span class="iconfont">&#xe692;</span>
          <a>购物车</a>
        </router-link>
      </div>
      <div class="icon2" @click="addCart">加入购物车</div>
      <div class="icon3">立即购买</div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'DetailContent',
  data () {
    return {
      list: '福建厦门市思明区城区观音山匹克大厦',
      goodsinfo: {
        id: +new Date(),
        imgurl: '//m.360buyimg.com/mobilecms/s843x843_jfs/t27433/99/360207484/56065/474c703/5b8feb99N788bb77f.jpg!q70.dpg.webp',
        text: 'adidas（阿迪达斯）三星CROWN -TPU透明壳原装手机壳 三叶草时尚简约经典款防摔防滑超薄硅胶保护套',
        price: '1709',
        num: 1
      }
    }
  },
  props: {
    text1: String,
    desc1: String,
    price1: String
  },
  methods: {
    addCart () {
      this.$router.push('/shopcart')
      this.addCartA(this.goodsinfo)
    },
    ...mapMutations(['addCartA'])
  }
}
</script>

<style lang="stylus" scoped>
  .cont
    margin-left .2rem
    margin-bottom 50px
  .title
    margin-top .14rem
    position relative
    border-bottom 1px solid #e5e5e5
  .offc img
    height 15px
  .goods-tit
    padding-right 60px
    color #333
    line-height .32rem
  .collec
    position: absolute
    right: .2rem
    top: 0
    display: inline-block
    padding-top: 4px
    margin-right: -10px
    line-height: 1em
    height: 30px
    width: 50px
    font-size: 10px
    color: #333
    border-left 1px solid #ddd
    text-align center
  .collec span
    font-size .4rem
  .collec div
    margin-top .1rem
    font-size .2rem
  .redh
    color: #e4393c
    padding: 5px 0 0
    line-height: 1.3
    position: relative
    font-size: 12px
    max-height: 46px
    overflow: hidden
  .redh a
    color #e4393c
    text-decoration underline
  .price
    margin-top .15rem
    margin-bottom .1rem
    overflow hidden
    .pri
      font-size .36rem
      color #e4393c
      font-weight bold
      line-height: 20px
    .pri i
      font-size: 12px
    .pre
      float right
      font-size .24rem
      color #333
      width 60px
      height 18px
      text-align center
      line-height 18px
      border 1px solid #ccc
      border-radius 3px
      margin-right .2rem
  .sale
    height 40px
    line-height 40px
    border-bottom 1px solid #e5e5e5
  .sale a
    left 10px
    top 12px
    font-size 12px
    color #999
    width 35px
    display inline-block
    float left
  .sale span
    overflow hidden
    font-size .26rem
    color #333
    width 70%
    display inline-block
    white-space: nowrap
    text-overflow: ellipsis
  .sale i
    float right
    margin-right .2rem
    font-size .6rem
    color #666
  .spec
    height 44px
    line-height 44px
  .shide
    padding-top: 10px
    background: #e8e8ed
    margin-left: -.2rem
    margin-top -1px
    position: relative
    z-index: 2
  .bottom
    position fixed
    bottom 0
    width 100%
    background #fff
    height 50px
    z-index 10
    border-top 1px solid #e5e5e5
    font-size 0
    overflow hidden
    .icon1
      width 15%
      display inline-block
      text-align center
      padding-top 5px
      float left
    .icon1 span
      font-size .45rem
      color #444
    .icon1 a
      font-size 10px
      display block
      margin-top 5px
      color #666
    .icon2
      width 27.5%
      background #ff9600
      color #fff
      text-align center
      line-height 50px
      font-size .28rem
      display inline-block
    .icon3
      width 27.5%
      background #e4393c
      color #fff
      text-align center
      line-height 50px
      font-size .28rem
      display inline-block
</style>
